<template>
  <div class="box regBox">
    <van-nav-bar
      title="注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="username"
        name="username"
        placeholder="用户名"
        :right-icon="unTest"
        :rules="[{ pattern1, message: '请输入3-16位英文或字母' }]"
      />
      <van-field
        v-model="tel"
        name="tel"
        placeholder="手机号"
        :right-icon="telTest"
        :rules="[{ pattern2, message: '请输入正确的手机号' }]"
      />
      <van-field
        v-model="sms"
        name="sms"
        placeholder="验证码"
        :right-icon="smsTest"
        :rules="[{ pattern3, message: '请输入正确的验证码' }]"
      >
        <template #button>
          <van-button size="small" type="primary" @click="onSendSms">{{smsTitle}}</van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        name="password"
        placeholder="密码"
        :right-icon="pwTest"
        :rules="[{ pattern4, message: '请输入正确的密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="allTest">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, field, button, Toast } from 'vant'
import { sendSms, register } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(field)
Vue.use(button)
Vue.use(Toast)

export default {
  data () {
    return {
      username: '',
      password: '',
      tel: '',
      sms: '',
      pattern1: /^\w{3,16}$/,
      pattern2: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
      pattern3: /^\d{6}$/,
      pattern4: /^\w{3,16}$/,
      smsTitle: '发送验证码'
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    },
    onSendSms () {
      let time = 60
      this.smsTitle = time + 's后重新发送'
      const t = setInterval(() => {
        if (time === 1) {
          clearInterval(t)
          this.smsTitle = '发送验证码'
        } else {
          time--
          this.smsTitle = time + 's后重新发送'
        }
      }, 1000)
      sendSms({
        tel: Number(this.tel)
      }).then(data => {
        switch (data.data.code) {
          case 200:
            Toast('验证码发送成功')
            break
          case 201:
            Toast('验证码再次发送成功')
            break
          case 202:
            Toast('手机号已被注册')
            break
          case 203:
            Toast(data.data.title)
            break
        }
      })
    },
    onSubmit (v) {
      const that = this
      register({
        username: v.username,
        password: v.password,
        tel: v.tel,
        code: v.sms
      }).then(data => {
        switch (data.data.code) {
          case 200:
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
          case 201:
            Toast('用户名重复')
            break
          case 202:
            Toast('请先发送验证码')
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('用户名已被注册')
            break
        }
      })
    }
  },
  computed: {
    unTest () {
      if (/^\w{3,16}$/.test(this.username)) {
        return 'success'
      }
      return ''
    },
    telTest () {
      if (/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(this.tel)) {
        return 'success'
      }
      return ''
    },
    smsTest () {
      if (/^\d{6}$/.test(this.sms)) {
        return 'success'
      }
      return ''
    },
    pwTest () {
      if (/^\w{3,16}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    allTest () {
      return this.unTest === '' || this.pwTest === '' || this.telTest === '' || this.smsTest === ''
    }
  }
}
</script>

<style>
</style>
